<template>
    <div class="goods_sku">
        <van-nav-bar title="规格" left-arrow fixed @click-left="onClickLeft" />
        <van-field v-model="goodsName" label="模型名称" placeholder="请输入模型名称" input-align="right" />
        <van-field v-model="goodsName" label="模型状态" placeholder="请选择模型状态" input-align="right" is-link readonly
            @click="showStatus = true" />
        <div class="add_good_sku" @click="addSkuGood"><van-icon name="plus" />添加规格</div>
        <div v-if="skuList.length > 0" v-for="items, indexs in skuList" :key='indexs'>
            <van-field v-model="items.name" label="规格名称" placeholder="请输入规格名称" input-align="right" />
            <van-field class="spec_value" v-for='item, index in items.spec_items' :key='index' v-model="item.name"
                label="" placeholder="请输入规格值" input-align="right">
                <template #left-icon>
                    <img @click="deleteSpecValue(indexs, index)" style="width:.4rem ;margin-top: .12rem;"
                        src="../../../../images/good_sku_jian.png" alt="">
                </template>
            </van-field>
            <div class="add_good_sku_spec" @click="addSpecValue(indexs)"><van-icon name="plus" />规格值</div>
        </div>
        <van-button
          round
          block
          type="info"
          @click="onSubmit"
          style="width: 95%;margin: 0.32rem auto;"
          color="linear-gradient(to right, #FF5851, #E9011B)"
          >提交</van-button
        >
        <van-popup v-model="showStatus" position="bottom">
            <van-picker value-key="name" show-toolbar :columns="columns" @confirm="onConfirm"
                @cancel="showStatus = false" />
        </van-popup>
    </div>
</template>
<script>
export default {
    name: 'sku',
    data() {
        return {
            goodsName: "",
            showStatus: false,
            cascaderValueMcc: '',
            columns: [
                {
                    id: 0,
                    name: '下架',
                },
                {
                    id: 1,
                    name: '上架',
                }
            ],
            skuList: [],
        }
    },
    created() {

    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        onConfirm(val) {
            this.goodsName = val.name
            this.showStatus = false
        },
        addSkuGood() {
            // 添加新的规格
            this.skuList.push({ name: '', spec_items: [] });
        },
        deleteSpecValue(skuIndex, itemIndex) {
            // 删除指定的规格值
            this.skuList[skuIndex].spec_items.splice(itemIndex, 1);
            // if (this.skuList[skuIndex].spec_items.length === 0) {
            //     this.skuList.splice(skuIndex, 1);
            // }
        },
        addSpecValue(skuIndex) {
            // 添加新的规格值
            this.skuList[skuIndex].spec_items.push({ name: '' });
        },
        onSubmit() {
            if(!this.goodsName){
                this.$toast('请选择商品状态')
            }
            if(this.skuList.length>0){
                for (let i = 0; i < this.skuList.length; i++) {
                    if (!this.skuList[i].name) {
                        this.$toast('请输入规格名称')
                        return
                    }else{
                        for (let j = 0; j < this.skuList[i].spec_items.length; j++) {
                            if (!this.skuList[i].spec_items[j].name) {
                                this.$toast('请输入规格值')
                                return
                            }
                        }
                    }
                }
            }
            // 提交表单
            console.log(this.skuList);
        }
    }
}
</script>
<style lang="scss">
.goods_sku {
    padding-top: 46px;

    .van-nav-bar .van-icon {
        color: #333333;
    }

    .van-nav-bar__arrow {
        font-size: 20px;
    }

    .van-hairline--bottom::after {
        display: none;
    }

    .add_good_sku {
        width: 2rem;
        margin: .2rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .28rem;
        color: #FF6200;
        line-height: 20px;
        text-align: left;
        font-style: normal;
    }

    .spec_value {
        .van-field__control--right {
            height: .68rem;
            background: #F2F4F5;
            text-align: center;
        }
    }

    .add_good_sku_spec {
        width: 1.5rem;
        margin: .2rem;
        padding: .1rem;
        box-sizing: border-box;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .28rem;
        color: #666;
        line-height: 20px;
        text-align: center;
        font-style: normal;
        background: #F2F4F5;
        border-radius: 17px;
    }

}
</style>